import React, { FC } from "react";
import classnames from "classnames";
import { prefixCls } from "../constant";

interface Props {
  onChange: () => void;
  onClear: () => void;
  disabled: boolean;
  clearText?: string;
  okText?: string;
}

const DateTimeRangeFooter: FC<Props> = ({
  onClear,
  onChange,
  disabled,
  clearText = "清空",
  okText = "确定",
}) => {
  return (
    <div className={`${prefixCls}-footer`}>
      <span onClick={onClear} role="clear">
        {clearText}
      </span>
      <span
        className={classnames(`${prefixCls}-confirm-btn`, {
          [`${prefixCls}-confirm-btn-disabled`]: disabled,
        })}
        onClick={onChange}
        role="confirm"
      >
        {okText}
      </span>
    </div>
  );
};

export default DateTimeRangeFooter;
